<template>
  <div class="addstudent">
    <el-row :gutter="30">
      <el-col :span="12">
        <el-row>
          单个添加
        </el-row>
        <el-row class="mt-10">
          <el-form ref="form" :model="form" label-width="80px" :rules="rules">

            <el-form-item label="教师名字" prop="teaname">
              <el-input v-model="form.teaname" placeholder="教师名字"></el-input>
            </el-form-item>

            <el-form-item label="工号" prop="jobNumber">
              <el-input v-model="form.jobNumber" placeholder="工号"></el-input>
            </el-form-item>

            <el-form-item label="性别" prop="sex">
              <el-radio v-model="form.sex" label="1">男</el-radio>
              <el-radio v-model="form.sex" label="2">女</el-radio>
            </el-form-item>

            <el-form-item label="手机号">
              <el-input v-model="form.phone" placeholder="手机号"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="form.email" placeholder="邮箱"></el-input>
            </el-form-item>


            <el-form-item label="所属学院" required>
              <el-col :span="11">
                <el-form-item prop="college">
                  <el-select v-model="form.college" placeholder="请选择学院" style="width: 100%;">
                    <el-option
                      v-for="item in collage"
                      :key="item.colId"
                      :label="item.colname"
                      :value="item.colId">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col class="line" :span="2">&nbsp;</el-col>
              <el-col :span="11">
                <el-form-item prop="date1" label="职称">
                  <el-input v-model="form.titles"></el-input>
                </el-form-item>
              </el-col>
            </el-form-item>

            <el-form-item label="入职时间" required>
              <el-col :span="10">
                <el-form-item prop="hiredate">
                  <el-date-picker type="date" placeholder="选择入学日期" v-model="form.hiredate"
                                  style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>

              <el-col :span="14">
                <el-form-item prop="birthday" label="生日">
                  <el-date-picker placeholder="选择生日" v-model="form.birthday" style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
            </el-form-item>


            <el-form-item label="备注">
              <el-input type="textarea" v-model="form.remarks"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('form')">立即创建</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>


        </el-row>
      </el-col>
      <el-col :span="12">
        <div> 批量添加</div>
        <el-row style="margin-top: 30px">
          <span>批量添加使用Excel表格</span>
        </el-row>
        <el-row style="margin-top: 30px">
          <el-button type="primary">点击下载模板样式</el-button>
        </el-row>
        <el-row style="margin-top: 30px">

        </el-row>
        <el-row style="margin-top: 30px">
          <el-upload
            class="upload-demo"
            action="http://localhost:8088/user/addteacherbeach"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :on-success="successinfo"
            :on-progress="progress"
            :on-error="errorinfo"
            accept=".xls,.xlsx"
            multiple
            name="teacher"
            :limit="10"
            :on-exceed="handleExceed"
            :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-row>
      </el-col>
    </el-row>

  </div>
</template>

<script>
  var loading;
  export default {
    name: "addteacher",
    data() {
      return {
        fileList: [],
        collage: [],
        form: {
          teaname: '',
          jobNumber: '',
          sex: '1',
          phone: '',
          titles: '',
          email: '',
          college: '',
          hiredate: '',
          birthday: '',
          remarks: '',

        },
        rules: {
          teaname: [
            {required: true, message: '请输入学生名字', trigger: 'blur'},

          ],
          jobNumber: [
            {required: true, message: '请输入学生学号', trigger: 'blur'}
          ],
          sex: [
            {required: true, message: '请选择性别', trigger: 'blur'},
            {min: 1, max: 2, message: '长度在 1 到 2个字符', trigger: 'blur'}
          ],
          School_hours: [
            {required: true, message: '请输入学生名字', trigger: 'blur'},

          ],
          hiredate: [
            {type: 'date', required: true, message: '请选择日期', trigger: 'blur'}
          ],
          birthday: [
            {type: 'date', required: true, message: '请选择日期', trigger: 'blur'}
          ],
          college: [
            {required: true, message: '请选择所属学院', trigger: 'blur'},

          ],
          clazz: [
            {required: true, message: '请选择所在班级', trigger: 'blur'},

          ]

        }
      }
    },
    methods: {
      submitForm(formName) {
        var self = this;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$http.post(this.URL.api + `user/addteacherone`, self.form)
              .then(res => {
                if(res.data.flag){
                  this.$message({
                    message: '添加成功',
                    type: 'success'
                  });
                  this.form = {
                    teaname: '',
                    jobNumber: '',
                    sex: '1',
                    phone: '',
                    titles: '',
                    email: '',
                    college: '',
                    hiredate: '',
                    birthday: '',
                    remarks: '',

                  }
                }else {
                  this.$message.error(res.data);
                }
              })

          } else {

            return false;
          }
        });
      },

      progress() {
        loading = this.$loading({
          lock: true,
          text: '加载中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      successinfo(response) {
        loading.close();
        if (response.flag) {
          this.$message({
            message: '批量添加成功',
            type: 'success'
          });
        } else {
          this.$message.error("添加失败");
          this.fileList = [];
        }

      },
      errorinfo() {
        this.$message.error("添加失败");
      },
      onSubmit() {

      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${file.name}？`);
      }
    },
    created() {

      var self = this;
      this.$http.get(this.URL.api + "queryallcollage").then(function (response) {

        self.collage = response.data.data;

      }).catch(function (response) {

      });
    }
  }
</script>

<style scoped>

</style>
